<script lang="ts" setup>
import myTopic from "@/composables/myTopic.ts";
const {addCat} = myTopic()
const form = reactive({
  title:'',
  icon:'WaterfallsH'
})
const tabs = ref([
  {label:'帖子大类添加',routeName:'cat.add'},
  {label:'帖子大类编辑',routeName:'cat.edit',switchShow:true},
])
const router = useRouter();
const onSubmit = async ()=>{
  try {
    await addCat(form);
    await router.push({name:'cat.index'})
  }catch (error){

  }
}
</script>
<template>
 <main class="cat_add">
   <my-tab :tabs="tabs"/>
   <el-card shadow="never">
     <el-form :model="form" label-width="120px">
       <el-form-item class="item" label="帖子大类标题" >
         <input v-model="form.title" v-clearError="'title'"/>
         <my-error name="title" />
       </el-form-item>
       <el-form-item class="item" label="帖子大类Icon">
         <input v-model="form.icon" v-clearError="'icon'"/>
         <my-error name="icon" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">创建</el-button>
       </el-form-item>
     </el-form>
   </el-card>
 </main>
</template>

<style lang="scss" scoped>
main.cat_add{
  @apply p-3;
  .item{
    input{
      @apply w-1/3 py-[2px] px-2 border border-slate-500 rounded outline-gray-500;
    }
  }

}
</style>
